<template>
  <div>
    <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="header">
      <div class="con">
        <div class="con-top">
          <img src="https://thirdqq.qlogo.cn/g?b=sdk&k=5hChzlWlGhBAZcxwMyLtLA&s=140&t=1650372321" alt="">
          <span style="margin-left: -144px; font-size: 20px">{{$store.state.userName}}</span>
          <span>详细></span>
        </div>
      </div>
      <van-button @click="exit" type="primary" size="large">退出</van-button>
    </div>
    <van-loading v-if="flag" size="40px" color="red;">退出中...</van-loading>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
export default {
  name: "MyCenter",
  data() {
    return {
      flag: false
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    },
    exit() {
      // localStorage.clear();
      this.$dialog.confirm({
        title: '退出',
        message: '您确定要退出吗',
      })
      .then(() => {
        localStorage.clear();
        this.flag = !this.flag;
        setTimeout(()=> {
          this.$router.push('/login');
          this.flag = !this.flag;
        }, 500)
      })
      .catch(() => {
        // on cancel
      });
    }
  },
  components: {
  },
  mounted() {
    // 发布
    PubSub.publish('CenterCom', 3);
  }
}
</script>

<style scoped>
  .header {
    padding: 10px;
    /*background-color: #bfa;*/
  }
  .con {
    width: 100%;
    height: 220px;
    background-color: red;
  }
  .con-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #cccccc;
    box-shadow: #ffffff;
  }
  .con-top img {
    width: 70px;
    border-radius: 50%;
  }
</style>